<template>
  <!-- 报关公司主体信息 -->
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <XForm :fieldList="fieldList" :formData="form"> </XForm>
      </template>
      <template #toolbar_btns>
        <VActionBar :actions="actions" />
      </template>
      <template #seller="{ row }">
        <div>
          <VText title="卖方编号" :value="row?.seller_number" />
          <VText title="卖方名称" :value="row?.seller_name" />
          <VText title="卖方联系人" :value="row?.seller_linkman" />
          <VText title="卖方电话" :value="row?.seller_tel" />
          <VText title="卖方传真" :value="row?.seller_fax" />
          <VText title="卖方地址" :value="row?.seller_address" :line="2" />
        </div>
      </template>
      <template #buy="{ row }">
        <div>
          <VText title="买方编号" :value="row?.buy_number" />
          <VText title="买方名称" :value="row?.buy_name" />
          <VText title="买方联系人" :value="row?.buy_linkman" />
          <VText title="买方电话" :value="row?.buy_tel" />
          <VText title="买方传真" :value="row?.buy_fax" />
          <VText title="买方地址" :value="row?.buy_address" :line="2" />
        </div>
      </template>
      <template #operation="{ row }">
        <div>
          <el-button
            link
            type="primary"
            @click="handleEdit(row)"
            v-hasPermi="[exportRebatesAuthList.customs_info.edit]"
          >
            编辑
          </el-button>
          <el-button
            link
            :type="row?.status == 0 ? 'primary' : 'danger'"
            @click="handleStatus(row)"
            v-hasPermi="[
              row?.status == 0
                ? exportRebatesAuthList.customs_info.enable
                : exportRebatesAuthList.customs_info.disabled,
            ]"
          >
            {{ row?.status == 0 ? "启用" : "禁用" }}
          </el-button>
          <el-button
            link
            type="primary"
            @click="handleLog(row)"
            v-hasPermi="[exportRebatesAuthList.customs_info.log]"
          >
            日志
          </el-button>
        </div>
      </template>
    </VTable>
    <add v-model="visible" :id="id" @close="id = null" @refresh="refresh" />
    <DerivedCenter ref="DerivedCenterRef"></DerivedCenter>
    <Log
      dialog
      v-model="logVisible"
      :autoLoad="false"
      tag="out.declare-company"
      :business_id="logId"
      @close="logId = null"
    />
  </VPage>
</template>
<script setup lang="jsx">
import { ElMessage } from "element-plus";
// import PageWrap from "@/components/PageWrap/index.vue";
import XForm from "@/components/XForm/index.vue";
import Log from "@/components/Log/index.vue";
// import ActionBar from "@/components/ActionBar/index.vue";
// import Table from "./components/Table/index.vue";
import DerivedCenter from "@/components/DerivedCenter/index.vue";
import { config_name } from "@/config/export.js";
import { exportRebatesAuthList } from "@/Auth/export-rebates.js";
import add from "./add/index.vue";
import { useEnumSelect } from "@/hooks";
import { useFetchSelect } from "@/hooks";
import { declareCompanyStatus } from "./api/index.js";
import { getTableSelectRow } from "@/hooks/tool.js";
import { logisticsList } from "@/api/index.js";
import { declareCompanyList } from "./api/index.js";
const { proxy } = getCurrentInstance();
const tableRef = ref();
const tableOptins = reactive({
  formConfig: {
    data: {
      numberNo: "",
      seller_name: "",
      status: "",
      dateRange: { type: "update_time", value: [], range: false }, // 组合+日期范围
    },
  },
  tooltipConfig: {
    showAll: false,
  },
  rowConfig: {
    height: 160,
  },
  isToggle: true,
  columns: [
    { fixed: "left", width: 50, type: "checkbox" },
    {
      fixed: "left",
      width: 320,
      title: "卖方信息",
      slots: { default: "seller" },
    },
    {
      title: "买方信息",
      fixed: "left",
      width: 320,
      slots: { default: "buy" },
    },
    {
      title: "签约地点",
      width: 200,
      field: "signing_place",
      line: 2,
    },
    { title: "供货源", width: 200, field: "supply_goods" },
    { title: "海关编号", width: 160, field: "hs_code" },
    { title: "发货地", width: 260, field: "place_of_shipment", line: 2 },
    {
      title: "启用/禁用",
      width: 120,
      field: "status",
      slots: {
        default: ({ row }) => {
          return <VstatusRender code={row} />;
        },
      },
    },
    { title: "更新人", width: 170, field: "update_user_name" },
    { title: "更新时间", width: 170, field: "update_time" },
    {
      title: "操作",
      field: "accrue_payment_amount",
      fixed: "right",
      width: 160,
      slots: { default: "operation" },
    },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page, form }) => {
        return declareCompanyList({ ...form, ...page }).then((res) => {
          return {
            data: res.data,
            total: res.total,
          };
        });
      },
    },
  },
});
const refresh = () => {
  tableRef?.value.$table.commitProxy("query");
};
//导出中心
const DerivedCenterRef = ref();
const handleExport = async () => {
  let condition = getTableSelectRow(tableRef.value);
  DerivedCenterRef.value.open({
    tag_name: config_name["export_rebates"]["declare_company"],
    condition,
  });
};

const visible = ref(false);
const handleAdd = () => {
  visible.value = true;
};
const id = ref(null);
const handleEdit = (item) => {
  visible.value = true;
  id.value = item?.id;
};
const handleStatus = (row) => {
  handleStatusReq([row.id], row.status ? 0 : 1);
};
const handleStatusReq = (id, flag) => {
  proxy?.confirm({
    title: "提示",
    content: (
      <p>
        确认{flag ? "启用" : "禁用"}选中的
        <span class="text-[#3366F1] px-[4px]">{id.length || 1}</span>
        条数据？
      </p>
    ),
    beforeClose: async (action, instance, done) => {
      if (action === "confirm") {
        try {
          instance.confirmButtonLoading = true;
          instance.confirmButtonText = "处理中..";
          await declareCompanyStatus({ id, status: flag ? 1 : 0 });
          ElMessage.success("操作成功");
        } catch (e) {
          console.error(e);
        } finally {
          instance.confirmButtonLoading = false;
          done();
          refresh();
        }
      } else {
        done();
      }
    },
  });
};
const logId = ref(null);
const logVisible = ref(false);
const handleLog = (item) => {
  logId.value = item.id;
  logVisible.value = true;
};
const publicStyle = { style: { width: "300px" } };
const fieldList = [
  {
    field: "numberNo",
    placeholder: "请输入",
    type: "input",
    selectStyle: { width: "100px" },
    select: [
      { label: "卖方编号", value: "seller_number" },
      { label: "买方编号", value: "buy_number" },
    ],
    ...publicStyle,
  },
  {
    field: "seller_name",
    placeholder: "卖方名称",
    type: "input",
  },
  {
    field: "status",
    type: "select",
    options: {
      placeholder: "是否启用",
      data: [
        { label: "禁用", value: 0 },
        { label: "启用", value: 1 },
      ],
    },
    style: { width: "100px" },
  },
  {
    field: "dateRange",
    type: "dateTimeRange",
    style: { width: "360px" },
    selectStyle: { width: "100px" },
    select: [{ label: "更新时间", value: "update_time" }],
    itemProps: {
      startPlaceholder: "最早时间",
      endPlaceholder: "最晚时间",
    },
  },
];

const actions = [
  {
    label: "新增",
    type: "primary",
    icon: "add2",
    fn: handleAdd,
    permission: [exportRebatesAuthList.customs_info.add],
  },
  {
    label: "导出",
    right: true,
    dkicon: "icon-Upload",
    fn: handleExport,
    permission: [exportRebatesAuthList.customs_info.export],
  },
];
</script>

//
<style lang="scss" scoped>
</style>
